<template>
  <div class="dialog-container">
    <el-dialog :visible.sync="showRelateUser" width="90%" title="关联用户" :before-close="handleClose">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="已有用户" name="existing">
          <existing-user ref="existingRef" :roleId="roleId" />
        </el-tab-pane>
        <el-tab-pane label="关联用户" name="relate">
          <relate-user ref="relateRef" :roleId="roleId" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  /* 组件 */
  import existingUser from './existing-user.vue'
  import relateUser from './relate-user.vue'

  export default {
    /* 关联用户 */
    name: 'user',
    data() {
      return {
        activeName: 'existing',
      };
    },
    props: ['showRelateUser', 'roleId'],
    components: {
      existingUser,
      relateUser,
    },
    methods: {
      handleClick(tab, event) {
        let name = tab.name
        if (name == 'existing') {
          this.$refs.existingRef.initData()
        } else if (name == 'relate') {
          this.$refs.relateRef.refreshData()
        }
      },

      handleClose() {
        this.$emit('closeDialog') // 向父组件发送关闭事件
      },

    }
  };
</script>

<style lang="scss" scoped>
</style>
